<!--
 * Copyright (c) 2017-2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0
 * which is available at https://www.apache.org/licenses/LICENSE-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0
-->
<div id="container" style="height: 100%; width: 100%"
     (mousedown)="showSelectionRange($event)"
     (click)="this.revalidateContainer()">
    <div id="grid"
         (mousedown)="trackTimeOfMouseDown()"
         (mouseup)="trackTimeOfMouseUp()"
         [class.crosshair]="this.gridTemplate.crosshair"
         [style.width.vw]="this.gridTemplate.gridDimension"
         [style.height.vh]="this.gridTemplate.gridDimension"
         [style.marginLeft.px]="this.gridTemplate.marginLeft">
        <div class="selection" id="selection"
             [class.selection-active]="this.gridTemplate.selectionActive"
             [style.left.px]="this.gridTemplate.pageX"
             [style.top.px]="this.gridTemplate.pageY"
             [style.width.px]="this.gridTemplate.selectionWidth"
             [style.height.px]="this.gridTemplate.selectionHeight"
             #selection>
            <span></span>
        </div>
    </div>
    <div #nodes>
        <winery-node *ngFor="let nodeTemplate of allNodeTemplates"
                     [nodeTemplate]="nodeTemplate"
                     [entityTypes]="this.entityTypes"
                     [allRelationshipTypesColors]="allRelationshipTypesColors"
                     (sendId)="activateNewNode($event)"
                     [navbarButtonsState]="navbarButtonsState"
                     (askForRepaint)="revalidateContainer($event)"
                     (askForRemoval)="removeElement($event)"
                     (setDragSource)="setDragSource($event)"
                     (closedEndpoint)="toggleClosedEndpoint($event)"
                     (sendCurrentType)="setCurrentType($event)"
                     [dragSource]="nodeTemplate.id + '_Endpoint'"
                     (handleNodeClickedActions)="handleNodeClickedActions($event)"
                     (updateSelectedNodes)="updateSelectedNodes($event)"
                     (unmarkConnections)="unmarkConnections()"
                     (sendNodeData)="toggleModalHandler($event)">
        </winery-node>
    </div>
    <!-- workaround for a jsPlumb connection bug, where upon loading node templates without relationships
        the two dummy points are connected, eluding the bug where no creation of connections are possible -->
    <div id="dummy1" style="width: 1px; height: 1px;"></div>
    <div id="dummy2" style="width: 1px; height: 1px;"></div>
</div>

<!-- CAPABILITIES MODAL -->
<winery-modal bsModal #capabilitiesModal="bs-modal" [modalRef]="capabilitiesModal">
    <winery-modal-header [title]="!showCurrentCapability?'Add Capability':'Modify/Delete Capability'">
    </winery-modal-header>
    <winery-modal-body>
        <form #capForm="ngForm" id="addCapForm" enctype="multipart/form-data">
            <fieldset>

                <div class="form-group" id="capIdGroup">
                    <label for="capId" class="control-label">Id:</label>
                    <input [(ngModel)]="capabilities.capId"
                           id="capId"
                           class="form-control"
                           [class.duplicateId]="duplicateId"
                           name="capId"
                           type="text"
                           required
                           (keyup)="onChangeCapId($event.target.value)"
                           #capId="ngModel">
                    <div [hidden]="capId.valid || capId.pristine"
                         class="alert alert-danger">
                        Id is required
                    </div>
                    <div class="idExists" [hidden]="!duplicateId"
                         class="alert alert-danger">
                        Id already exists
                    </div>
                </div>

                <div class="form-group">
                    <label for="CapNameChooser" class="control-label">Definition Name:</label>
                    <div *ngIf="!showCurrentCapability;else disabledCapName">
                        <select [(ngModel)]="capabilities.capDefinitionName"
                                name="capName"
                                id="CapNameChooser"
                                class="form-control"
                                type="text"
                                required
                                (change)="onChangeCapDefinitionName($event.target.value)">
                            <option *ngFor="let capDefinitionName of capabilities.capDefinitionNames"
                                    [value]="capDefinitionName">{{ capDefinitionName }}
                            </option>
                        </select>
                    </div>
                    <ng-template #disabledCapName>
                        <input [(ngModel)]="capabilities.capDefinitionName"
                               id="CapName"
                               class="form-control"
                               name="CapName"
                               type="text"
                               required
                               disabled="disabled"/>
                    </ng-template>
                </div>

                <div class="form-group">
                    <label for="CapTypeDisplay" class="control-label">Cap Type:</label>
                    <input id="CapTypeDisplay"
                           class="form-control"
                           type="text"
                           required
                           name="CapTypeDisplay"
                           disabled="disabled"
                           [(ngModel)]="capabilities.capQNameLocalName"/>
                </div>

                <div class="form-group" *ngIf="showCurrentCapability || showDefaultProperties">
                    <div *ngIf="capabilities.propertyType === 'KV'">
                        <div *ngFor="let key of capabilities.properties | keysPipe; let i = index">
                            <label for="CapKVPropertyDisplay" class="control-label">{{key.key}}</label>
                            <textarea
                                id="CapKVPropertyDisplay"
                                #KVTextareas
                                style="width:100%; overflow-y: scroll;"
                                rows="1"
                                placeholder="Edit your value here."
                                required
                                value="{{key.value}}">
                                </textarea>
                        </div>
                    </div>
                    <div *ngIf="capabilities.propertyType === 'XML'">
                        <label for="CapXMLPropertyDisplay" class="control-label">XML Property:</label>
                        <textarea
                            id="CapXMLPropertyDisplay"
                            #XMLTextareas
                            style="width:100%; overflow-y: scroll;"
                            rows="10"
                            placeholder="Edit your value here."
                            required
                            value="{{capabilities.properties}}">
                </textarea>
                    </div>
                </div>
            </fieldset>
        </form>
    </winery-modal-body>
    <winery-modal-footer [showDefaultButtons]="false">
        <button type="button" id="cancelCapabilities" class="btn btn-default"
                (click)="closeAndResetCapabilities(); capForm.reset()">Cancel
        </button>
        <button *ngIf="!showCurrentCapability; else deleteCapButton"
                (click)="saveCapabilityToModel(); capForm.reset()" type="button" id="addCapbtn" class="btn btn-primary"
                [disabled]="!capForm.form.valid || duplicateId">Add
        </button>
        <ng-template #deleteCapButton>
            <button type="button" id="updateCapabilitiesBtn" (click)="updateCaps(); capForm.reset()"
                    class="btn btn-primary" [disabled]="!capForm.form.valid || duplicateId">Update
            </button>
            <button (click)="deleteCapability(); capForm.reset()" type="button" id="deleteCapbtn"
                    class="btn btn-primary">Delete
            </button>
        </ng-template>
    </winery-modal-footer>
</winery-modal>

<!-- REQUIREMENTS MODAL -->
<winery-modal bsModal #requirementsModal="bs-modal" [modalRef]="requirementsModal">
    <winery-modal-header [title]="!showCurrentRequirement?'Add Requirement':'Modify/Delete Requirement'">
    </winery-modal-header>
    <winery-modal-body>
        <form #reqForm="ngForm" id="addReqForm" enctype="multipart/form-data">
            <fieldset>

                <div class="form-group" id="ReqIdGroup">
                    <label for="reqId" class="control-label">Id:</label>
                    <input [(ngModel)]="requirements.reqId"
                           id="reqId"
                           class="form-control"
                           [class.duplicateId]="duplicateId"
                           name="reqId"
                           type="text"
                           required
                           (keyup)="onChangeReqId($event.target.value)"
                           #reqId="ngModel">
                    <div [hidden]="reqId.valid || reqId.pristine"
                         class="alert alert-danger">
                        Id is required
                    </div>
                    <div class="idExists" [hidden]="!duplicateId"
                         class="alert alert-danger">
                        Id already exists
                    </div>
                </div>

                <div class="form-group">
                    <label for="ReqNameChooser" class="control-label">Definition Name:</label>
                    <div *ngIf="!showCurrentRequirement;else disabledReqName">
                        <select [(ngModel)]="requirements.reqDefinitionName"
                                id="ReqNameChooser"
                                name="ReqNameChooser"
                                class="form-control"
                                type="text"
                                required
                                (change)="onChangeReqDefinitionName($event.target.value)">
                            <option *ngFor="let reqDefinitionName of requirements.reqDefinitionNames"
                                    [value]="reqDefinitionName">
                                {{reqDefinitionName}}
                            </option>
                        </select>
                    </div>
                    <ng-template #disabledReqName>
                        <input [(ngModel)]="requirements.reqDefinitionName"
                               id="ReqName"
                               class="form-control"
                               name="ReqName"
                               type="text"
                               required="required"
                               disabled="disabled"/>
                    </ng-template>
                </div>

                <div class="form-group">
                    <label for="ReqTypeDisplay" class="control-label">Req Type:</label>
                    <input [(ngModel)]="requirements.reqQNameLocalName"
                           id="ReqTypeDisplay"
                           name="ReqTypeDisplay"
                           class="form-control"
                           type="text"
                           required
                           disabled="disabled"/>
                </div>
                <div class="form-group" *ngIf="showCurrentRequirement || showDefaultProperties">
                    <div *ngIf="requirements.propertyType === 'KV'">
                        <div *ngFor="let key of requirements.properties | keysPipe; let i = index">
                            <label for="reqKVPropertyDisplay" class="control-label">{{key.key}}</label>
                            <textarea
                                id="reqKVPropertyDisplay"
                                #KVTextareas
                                style="width:100%; overflow-y: scroll;"
                                rows="1"
                                placeholder="Edit your value here."
                                required
                                value="{{key.value}}">
                </textarea>
                        </div>
                    </div>
                    <div *ngIf="requirements.propertyType === 'XML'">
                        <label for="ReqXMLPropertyDisplay" class="control-label">XML Property:</label>
                        <textarea
                            id="ReqXMLPropertyDisplay"
                            #XMLTextareas
                            style="width:100%; overflow-y: scroll;"
                            rows="10"
                            placeholder="Edit your value here."
                            required
                            value="{{requirements.properties}}">
                </textarea>
                    </div>
                </div>
            </fieldset>
        </form>
    </winery-modal-body>
    <winery-modal-footer [showDefaultButtons]="false">
        <button type="button" id="cancelRequirements" class="btn btn-default"
                (click)="closeAndResetRequirements(); reqForm.reset()">Cancel
        </button>
        <button *ngIf="!showCurrentRequirement; else deleteReqButton"
                (click)="saveRequirementsToModel(); reqForm.reset()" type="button" id="addReqbtn"
                class="btn btn-primary" [disabled]="!reqForm.form.valid || duplicateId">Add
        </button>
        <ng-template #deleteReqButton>
            <button type="button" id="updateRequirementsBtn" (click)="updateReqs(); reqForm.reset()"
                    class="btn btn-primary" [disabled]="!reqForm.form.valid || duplicateId">Update
            </button>
            <button (click)="deleteRequirement(); reqForm.reset()" type="button" id="deleteReqBtn"
                    class="btn btn-primary">Delete
            </button>
        </ng-template>
    </winery-modal-footer>
</winery-modal>

<!-- IMPORT TOPOLOGY MODAL -->
<winery-modal bsModal #importTopologyModal="bs-modal" [modalRef]="importTopologyModal">
    <winery-modal-header [title]="'Select Topology to Import'">
    </winery-modal-header>
    <winery-modal-body>
        <form #importTopologyForm="ngForm" id="importTopologyForm" enctype="multipart/form-data">
            <fieldset>
                <div class="form-group">
                    <label for="ImportTopology" class="control-label">Topology Template:</label>
                    <select [(ngModel)]="importTopologyData.selectedTopologyTemplateId"
                            name="ImportTopology"
                            id="ImportTopology"
                            class="form-control"
                            type="text"
                            required
                            (change)="onChangeTopologyTemplate($event.target.value)">
                        <option *ngFor="let topologyTemplate of importTopologyData.allTopologyTemplates"
                                [value]="topologyTemplate.id">{{ topologyTemplate.id }}
                        </option>
                    </select>
                </div>
            </fieldset>
        </form>
    </winery-modal-body>
    <winery-modal-footer [showDefaultButtons]="false">
        <button type="button" id="cancelImportTopology" class="btn btn-default" (click)="closeImportTopology();
        importTopologyForm.reset()">Cancel
        </button>
        <button (click)="importTopology(); importTopologyForm.reset()"
                type="button" id="importTopologyBtn" class="btn btn-primary"
                [disabled]="!importTopologyForm.form.valid">Add
        </button>
    </winery-modal-footer>
</winery-modal>

<winery-entities-modal [(modalVariantAndState)]="modalData"
                       [entityTypes]="entityTypes"
                       [currentNodeData]="currentModalData">
</winery-entities-modal>
